<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta charset="utf-8">
  <title>Lazy Load Enabled With AJAX Content</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link type="text/css" media="screen" href="css/appelsiini.css" rel="stylesheet">
  <link href="css/font-awesome.min.css" rel="stylesheet"><link href="css/jieyou.css" rel="stylesheet">
  <!--[if lt IE 9]>
    <script src="page_js/html5shiv.js"></script>
  <![endif]-->
  
  <style type="text/css">
    .container img, #container {
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div class="jumbotron">
    <div class="container">
      <div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
        <h1>lazyload Plugin for jQuery | Zepto</h1>
        <p class="des">
          <!--<iframe src="http://ghbtns.com/github-btn.html?user=tuupola&amp;repo=jquery_lazyload&amp;type=watch&amp;count=true&amp;size=small" allowtransparency="true" frameborder="0" scrolling="0" width="92" height="30"></iframe>    
          <iframe src="http://ghbtns.com/github-btn.html?user=tuupola&amp;repo=jquery_lazyload&amp;type=fork&amp;count=true&amp;size=small" allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>-->
          This project is forked from <a href="https://github.com/tuupola/jquery_lazyload"><span class="label label-danger">tuupola/jquery_lazyload</span></a> and add features below:<br/>
          * Many Details for improve performance;<br/>
          * IE6/7 support;<br/>
          * Available with <a href="https://github.com/madrobby/zepto"><span class="label label-danger">Zepto</span></a>;<br/>
          * `vertical_only` \ `minimum_interval` \ `use_minimum_interval_in_ios` \ `no_fake_img_loader` options.
        </p>
        <p class="des">
          More information on <a href="https://github.com/jieyou/lazyload"><span class="label label-danger">jieyou/lazyload</span></a>.
        </p>
      </div>
    </div>
  </div>
   
  <div class="container">
    <div class="col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">
      
      <h2>Plugin enabled with AJAX loaded content</h2>
      <p>
        Images are loaded via AJAX(H) call after you click the container. Lazy Load 
        is applied in the callback.
      </p>
      <pre class="prettyprint">
 $("#container").one("click", function() {
     $("#container").load("images.html", function(response, status, xhr) {
       $("img.lazy").lazyload();
     });              
 });</pre>
      <pre class="prettyprint"> &lt;img class="lazy" data-original="img/example.jpg" width="765" height="574"&gt;</pre>
      <p>
        On IE6, You can use the codes below,to solve problem that `imgs` have no height when just appended to the DOM tree.
      </p>
      <pre class="prettyprint">
 $("#container").one("click", function() {
     $("#container").load("images.html", function(response, status, xhr) {
        setTimeout(funtion(){
         $("img.lazy").lazyload();
        },0)
     });              
 });</pre>
      <div id="container">
          Click me to load content...
      </div>
    </div>
  </div>
  
  

  <script src="http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min.js"></script>
  <!-- <script src="http://webmap2.map.bdimg.com/yyfm/zepto_default/1.0/js/zepto_default.min.js"></script> -->
  <script src="../lazyload.js"></script>
  <!-- <script src="page_js/demo.js"></script> -->
  <script type="text/javascript" charset="utf-8">
  $(function() {
      $("#container").one("click", function() {
          $("#container").load("enabled.html #container", function(response, status, xhr) {
            setTimeout(function(){
              $("img.lazy").lazyload();
            },0)
          });              
      });
  });
  </script>
</body>
</html>

  

